<template>
  <div class="prediction-wrapper">
    <title-bar 
    :more="more"
    :bar-title="dealBarTitle" 
    barStyleName="horiz-bar"
    :link="newpredictionLink"></title-bar>
    <text-grid>
      <grid-item><label slot="label">本月</label><span slot="value">{{ (values.month_sum || 0) | moneyFormate }}元</span></grid-item>
      <grid-item><label slot="label">下月</label><span slot="value">{{ values.next_month_sum | moneyFormate }}元</span></grid-item>
    </text-grid>
  </div>
</template>
<script>
import TitleBar from './title-bar'
import TextGrid from './TextGrid/grid'
import GridItem from './TextGrid/grid-item'
import { mapState } from 'vuex'

const MY = 'my'
const TEAM = 'team'
const COMPANY = 'company'

export default {
  props: {
    values: {
      type: Object,
      default: function () {
        return {
          order_number: 0,
          order_sum: 0,
          refund_sum: 0
        }
      }
    },
    time: {
      type: String | Number
    },
    id: {
      type: String | Number
    },
    type: {
      type: String
    },
    time: {
      type: String | Number
    },
    suid: {
      type: String | Number
    }
  },
  data () {
    return {
      dealBarTitle: '预测业绩',
      newpredictionLink: {},
      data: [],
      more: false,
      morePath: ''
    }
  },
  components: {
    TitleBar,
    TextGrid,
    GridItem
  },
  watch: {
    values () {
      this.initLinks()
    }
  },
  computed: {
    ...mapState({
      user: state => state.app.user
    })
  },
  methods: {
    initLinks () {
      let query
      this.more = true
      switch (this.type) {
        case MY:
          query = {
            flag_id: this.suid,
            team_id: this.id,
            time: this.time,
            type: this.type
          }
          this.newpredictionLink = {name: 'prediction', query: query}
          break;
        case TEAM:
          query = {
            flag_id: this.id,
            team_id: this.id,
            time: this.time,
            type: this.type
          }
          this.newpredictionLink = {name: 'prediction', query: query}
          break;
        default:
          this.more = false
      }
    },
  },
  mounted () {
    this.initLinks()
  }
}
</script>
<style lang="less">
.prediction-wrapper {
  background-color: white;

  .crm-title-bar .color-horiz-bar.default {
  }

  .horiz-bar {
    background-color: #fd6899;
  }
}
</style>
